<template>
	<!--重大项目现状分析功能-->
	<div class="project-monitoring">
		<div class="monitoring-top">
			<div class="titlebox" style="width: 47%; float: left;">
				<div class="ceTan">
					<div class="tabBox">
						<div class="tabi-tems">
							<img src="../../assets/images/generate_total.png" alt="">
							<span>重大项目总数量</span>
							<span class="colorSpan">{{ zdxmsl }}</span>
						</div>
					</div>
				</div>
				<div class="ceTan">
					<div class="tabBox">
						<div class="tabi-tems">
							<img src="../../assets/images/finance.png" alt="">
							<span>未开工项目总数量：</span>
							<span class="colorSpan1">{{ wkg }}</span>
							<span>占比：</span>
							<span class="colorSpan1">{{ wkgzb }}</span>
						</div>
					</div>
				</div>
				<div class="ceTan">
					<div class="tabBox">
						<div class="tabi-tems">
							<img src="../../assets/images/finance.png" alt="">
							<span>实施中项目总数量：</span>
							<span class="colorSpan1">{{ ykg }}</span>
							<span>占比：</span>
							<span class="colorSpan1">{{ ykgzb }}</span>
						</div>
					</div>
				</div>
			</div>
			<normal-block chartID="chart1" title="重点项目阶段分布" chartType="getStackBar" :isTitle="isTitle" height="34vh" style="overflow: hidden; width: 51%; float: right;">
				<template>
					<div class="listBox">
						<chart-block chartID="chart2" :title="PieLightOptionData.title" :optionData="PieLightOptionData" chartType="getBlockLine" style="margin-top:0vh;background:rgba(12,51,127,.4);border:none;box-shadow: none;padding-top:1vh" :isTitle="false" height="25vh"></chart-block>
					</div>
					<!-- <div class="mapBox">
						<mapv-block :pointList="pointList" :center="center" :zoom="zoom" showMarker="xmjk" :legend="true"></mapv-block>
					</div> -->
				</template>
			</normal-block>
		</div>
		<div class="monitoring-bottom">
			<div class="items1 itemBox">
				<normal-block chartID="chart1" title="重大项目进度跟踪" chartType="getStackBar" :isTitle="isTitle" height="100%">
					<template>
						<div class="rightCenbox">
							<div class="topSearch">
								<el-input placeholder="请输入项目名称" v-model="searchText" class="input-with-select" size="mini" clearable @keyup.enter.native="proSeach">
									<el-button slot="append" icon="el-icon-search" @click="proSeach">搜索</el-button>
								</el-input>
							</div>
							<div class="centerBox">
								<ul>
									<li v-for="(item,index) in projectList" :key="index" @click="projectClick(item)">
										<img class="name-img" :src="require('@/assets/images/proicon.png')" alt="">
										<smart-tooltip class="project-name" rows="1" :value="item.projectName" width="65%">
											<p class="projectName">{{ item.projectName }}</p>
										</smart-tooltip>
										<div class="tagBox">
											<span>总投资：</span>
											<span class="span1">{{ item.ztz }}万</span>
											<!--<span>所属行业：</span>
											<span class="span2">{{ item.sshy }}</span>-->
										</div>
										<div class="pro-list overflowData" style="max-height: 200px; overflow: auto;">
											<!-- <div class="stageNum">
											   <span>{{ item.lxydfhxkts }}天</span>
											   <span>{{ item.gcjsxkts }}天</span>
											   <span>{{ item.sgxkts }}天</span>
											   <span>{{ item.jgysts }}天</span>
										   </div>  -->
											<!-- <div class="stageBg">
											   <div class="sbor"></div>
											   <div class="start-datebg">
												   <div :class="progressShow ? 'line-animate' : ''" :style="{'background-image':'url('+item.bgicon1+')',}">
													   <span class="firstSpan" :style="{'background-image':'url('+item.chIcon1+')'}"></span>
													   <span class="lastSpan" :style="{'background-image':'url('+item.chIcon2+')'}"></span></div>
												   <div :class="progressShow ? 'line-animate' : ''" :style="{'background-image':'url('+item.bgicon2+')'}">
													   <span class="lastSpan" :style="{'background-image':'url('+item.chIcon3+')'}"></span></div>
												   <div :class="progressShow ? 'line-animate' : ''" :style="{'background-image':'url('+item.bgicon3+')'}">
													   <span class="lastSpan" :style="{'background-image':'url('+item.chIcon4+')'}"></span></div>
												   <div :class="progressShow ? 'line-animate' : ''" :style="{'background-image':'url('+item.bgicon4+')'}">
													   <span class="lastSpan" :style="{'background-image':'url('+item.chIcon5+')'}"></span></div>
											   </div>
										   </div> -->
											<div class="stageBox" style="background: rgba(0, 36, 255, 0.7) none repeat scroll 0% 0%;">
												<!-- <div>
													<span>{{ item.lxydghxklcbsj }}<br/>立项用地规划许可</span>
												</div>
												<div>
													<span>{{ item.gcjsxklcbsj }}<br/>工程建设许可</span>
												</div>
												<div>
													<span>{{ item.sgxklcbsj }}<br/>施工许可</span>
												</div>
												<div>
													<span>{{ item.jgyslcbsj }}<br/>建设许可</span>
												</div>
												<div>
													<span>{{ item.jgyslcbsj }}<br/>竣工验收</span>
												</div> -->
												<div class="titles">
													<span style="line-height: 28px;">当前进度</span>
												</div>
												<div class="titles">
													<span style="line-height: 28px;">计划开始时间</span>
												</div>
												<div class="titles">
													<span style="line-height: 28px;">计划结束时间</span>
												</div>
											</div>
											<div  v-if="item.jdList.length">
												<div v-for="(jd,jdindex) in item.jdList" class="stageBox" :key="jdindex">
													<div>
														<span>{{ jd.jdmc }}</span>
													</div>
													<div>
														<span>{{ jd.kgsj }}</span>
													</div>
													<div>
														<span>{{ jd.wgsj }}</span>
													</div>
												</div>
											</div>
											<div class="stageBox" v-else>
												<div style="width: 100%;">
													<span>暂无数据</span>
												</div>
											</div>

										</div>
										<img v-if="index !== 2" src="../../assets/images/bomImg.png" alt="" class="bom-img">
									</li>
								</ul>
								<page-full :pageSize="pageSize" :total="total" @currentChange="currentChange" style="margin-bottom:1.5vh"></page-full>
							</div>
						</div>
					</template>
				</normal-block>
			</div>

		</div>
	</div>
</template>

<script>
import {getCommonData6, getCommonData7, getCommonData8, getCommonData9, getCommonData74} from '@/api/pages.js'

export default {
	name: "project-status",
	components: {
		NormalBlock: () => import('@/components/normal-block'),
		ChartBlock: () => import('@/components/chart-block'),
		MapvBlock: () => import('@/components/mapv-block'),
		PageFull: () => import('@/components/pageFull-block'),
		SmartTooltip: () => import('@/components/smart-tooltip')
	},
	props: {},
	data() {
		return {
			PieLightOptionData: {
				title: '',
				categoryAxis: [], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#47ffc0',
						bottomColor: '#0dccff'
					},
				],
			},
			pageSize: 3,
			total: 0,
			zdxmsl: 0,
			// yqxmsl: 0,
			wkg: 0,//未开工项目总数量
			wkgzb: 0,//未开工数量占比
			ykg: 0,// 实施中项目总数量
			ykgzb: 0,//实施中项目数量占比
			searchText: '',
			nones: 'none',
			noStage: require('../../assets/images/nostage.png'),
			yseStage: require('../../assets/images/yesstage.png'),
			stage1: require('../../assets/images/stage1.png'),
			stage2: require('../../assets/images/stage2.png'),
			projectList: [
				{
					name: '斤斤计较',
					stage: 0
				},
				{
					name: '斤斤计较',
					stage: 33
				},
				{
					name: '斤斤计较',
					stage: 100
				},
			],
			jdList:[
				{jdmc:'',kgsj:'',wgsj:''}
			],
			pointList: [],
			center: {lng: 119.140177, lat: 35.56202},
			zoom: 9,
			progressShow: false
		}
	},
	computed: {},
	created() {

	},
	mounted() {
		this.getCommonData6('C003')
		this.getCommonData7('E120')
		this.getCommonData8('C004')
		this.getCommonData9('P002', this.searchText, 1, this.pageSize)
		this.getCommonData74('C074',)
	},
	methods: {
		//项目名称跳转
		projectClick(data) {
			this.$router.push({path: '/projects/detail', query: {projectId: data.projectId}});
		},
		// 项目数量概括
		getCommonData6(busiCode) {
			getCommonData6(busiCode).then(res => {
				if (res.data.code === 200) {
					this.zdxmsl = res.data.data.list[0].zdxmsl
					// this.yqxmsl = res.data.data.list[0].yqxmsl
				}
			}).catch(err => {

			})
		},
		// 开工未开工总数量/占比
		getCommonData74(busiCode) {
			getCommonData74(busiCode).then(res => {
				if (res.data.code === 200) {
					this.wkg = res.data.data.list[0].wkg
					this.wkgzb = res.data.data.list[0].wkgzb
					this.ykg = res.data.data.list[0].ykg
					this.ykgzb = res.data.data.list[0].ykgzb
				}
			}).catch(err => {

			})
		},
		// 重大项目阶段分布
		getCommonData7(busiCode) {
			getCommonData7(busiCode).then(res => {
				var newData = res.data.data.seriesData[0].data//定义一个新数组取seriesData的值
				if (res.data.code === 200) {
					let data = res.data.data
					this.PieLightOptionData.title = data.title
					this.PieLightOptionData.categoryAxis = data.categoryAxis
					this.PieLightOptionData.seriesData = res.data.data.seriesData[0].data
					this.PieLightOptionData.unit = res.data.data.seriesData[0].unit
					// this.PieLightOptionData = {
					// 	title: res.data.data.title,
					// 	color: [//图表颜色 c1为渐变开始颜色，c2为渐变结束颜色
					// 		{c1: '#2D87F2', c2: '#7CCCFE'},
					// 		{c1: '#ECB41B', c2: '#E1F843'},
					// 		{c1: '#FB991B', c2: '#FDB353'},
					// 		{c1: '#D83251', c2: '#F0628A'},
					// 		{c1: '#aa557f', c2: '#aa5500'},
					// 		{c1: '#ff55ff', c2: '#782878'},
					// 		{c1: '#aa5500', c2: '#fc7e00'},
					// 		{c1: '#5500ff', c2: '#3d00b8'},
					// 		{c1: '#aaff7f', c2: '#77b158'},
					// 		{c1: '#aaaa00', c2: '#e7e700'},
					// 		{c1: '#0000ff', c2: '#4EF3A0'}
					// 	],
					// 	seriesData: newData.splice(1,4),//从seriesData中第二组数据开始取值
					// 	right: '15%',
					// 	radius: '85%',
					// 	labelShow: true,//默认lable是否显示
					// 	labelColor: '#7cb1e2',//默认lable的颜色
					// 	position: 'left',//lable位置,center/left
					// 	emphasisLable: false,//鼠标悬停lable是否显示
					// }
				}
			}).catch(err => {

			})
		},
		// 重大项目阶段分布-地图
		getCommonData8(busiCode) {
			getCommonData8(busiCode).then(res => {
				if (res.data.code === 200) {
					let mapData = []
					var lng = 0
					var lat = 0
					res.data.data.list.forEach((item, index, arr) => {
						mapData.push({
							name: item.projectName,
							lng: item.longtitude,
							lat: item.latitude,
							id: item.projectId,
							dqxmjd: item.dqxmjd
						})
						lng += parseFloat(item.longtitude) / res.data.data.list.length
						lat += parseFloat(item.latitude) / res.data.data.list.length
					})
					this.pointList = mapData
					this.center.lng = lng
					this.center.lat = lat
				}
			}).catch(err => {

			})
		},
		// 重大项目进度跟踪
		getCommonData9(busiCode, projectName, current, size) {
			this.progressShow = false //分页切换时控制动画播放
			getCommonData9(busiCode, projectName, current, size).then(res => {
				if (res.data.code === 200) {
					this.total = res.data.data.list.total
					// res.data.data.list.records.forEach((item, index, arr) => {
					// 	if (item.dqxmjd === '立项用地规划许可') {
					// 		item.bgicon1 = this.stage2
					// 		item.bgicon2 = this.nones
					// 		item.bgicon3 = this.nones
					// 		item.bgicon4 = this.nones
					// 		item.chIcon1 = this.yseStage
					// 		item.chIcon2 = this.none
					// 		item.chIcon3 = this.noStage
					// 		item.chIcon4 = this.noStage
					// 		item.chIcon5 = this.noStage
					// 	} else if (item.dqxmjd === '工程建设许可') {
					// 		item.bgicon1 = this.stage1
					// 		item.bgicon2 = this.stage2
					// 		item.bgicon3 = this.nones
					// 		item.bgicon4 = this.nones
					// 		item.chIcon1 = this.yseStage
					// 		item.chIcon2 = this.none
					// 		item.chIcon3 = this.none
					// 		item.chIcon4 = this.noStage
					// 		item.chIcon5 = this.noStage
					// 	} else if (item.dqxmjd === '施工许可') {
					// 		item.bgicon1 = this.stage1
					// 		item.bgicon2 = this.stage1
					// 		item.bgicon3 = this.stage2
					// 		item.bgicon4 = this.nones
					// 		item.chIcon1 = this.yseStage
					// 		item.chIcon2 = this.none
					// 		item.chIcon3 = this.none
					// 		item.chIcon4 = this.none
					// 		item.chIcon5 = this.noStage
					// 	} else if (item.dqxmjd === '建设许可') {
					// 		item.bgicon1 = this.stage1
					// 		item.bgicon2 = this.stage1
					// 		item.bgicon3 = this.stage1
					// 		item.bgicon4 = this.stage2
					// 		item.chIcon1 = this.yseStage
					// 		item.chIcon2 = this.none
					// 		item.chIcon3 = this.none
					// 		item.chIcon4 = this.none
					// 		item.chIcon5 = this.none
					// 	} else if (item.dqxmjd === '竣工验收') {
					// 		item.bgicon1 = this.stage1
					// 		item.bgicon2 = this.stage1
					// 		item.bgicon3 = this.stage1
					// 		item.bgicon4 = this.stage2
					// 		item.chIcon1 = this.yseStage
					// 		item.chIcon2 = this.none
					// 		item.chIcon3 = this.none
					// 		item.chIcon4 = this.none
					// 		item.chIcon5 = this.none
					// 	}
					// })
					this.projectList = res.data.data.list.records
					// this.projectList.jdmc = res.data.data.list.records.jdList.jdmc
					// this.projectList.kgsj = res.data.data.list.records.jdList.kgsj
					// this.projectList.wgsj = res.data.data.list.records.jdList.wgsj
					this.progressShow = true
				}
			}).catch(err => {

			})
		},
		currentChange(e) {
			this.getCommonData9('P002', this.searchText, e, this.pageSize)
		},
		proSeach() {
			this.getCommonData9('P002', this.searchText, 1, this.pageSize)
		}
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.project-monitoring {
	width: 100%;
	height: auto;
	padding: 6vh 1.3vw 2vh;

	.monitoring-top {
		width: 100%;
		height: 37vh;

		.ceTan {
			width: 100%;
			height: 10vh;
			background: url(../../assets/images/tabbg.png);
			background-size: 100% 100%;
			border: 1px solid #0E7FD6;
			margin-bottom: 2vh;

			.tabBox {
				width: 100%;
				height: 100%;
				padding: .8vh 0;
				box-sizing: border-box;

				.tabi-tems {
					// width: 50%;
					height: 100%;
					float: left;
					padding-left: 5vw;
					box-sizing: border-box;

					img {
						width: 7.6vh;
						height: 7vh;
						float: left;
						margin-top: .8vh;
						margin-right: .5vh;
					}

					span {
						line-height: 8.5vh;
						font-size: 1.2vw;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						margin-right: 2vh
					}

					span.colorSpan {
						color: #F7E303;
						font-size: 1.45vw;
					}

					span.colorSpan1 {
						color: #3EE2E4;
						font-size: 1.45vw;
					}
				}

				// .tabi-tems:first-child {
				// 	border-right: 1px solid rgba(1, 137, 232, 0.7)
				// }
			}
		}

		.mapBox {
			width: 100%;
			height: 40vh;
			padding: .5vh 1.5vw;
			box-sizing: border-box;
		}

		.listBox {
			width: 100%;
			height: 27vh;
			padding: 0 1.5vw;
			box-sizing: border-box;
		}
	}

	.monitoring-bottom {
		width: 100%;

		.itemBox {
			width: 100%;

			.normal-block {
				overflow-x: hidden;
				overflow-y: hidden;
			}

			.rightCenbox {
				width: 100%;
				// height:100%;
				padding: 0.5vw;
				box-sizing: border-box;

				.topSearch {
					width: 60%;
					float: left;

					/deep/ {
						.el-input--mini {
							font-size: 0.63vw;

							.el-input__inner {
								height: 3.1vh;
								line-height: 3.1vh;
							}
						}

						.el-input-group__append {
							padding: 0 0.36vw;
							background: #089AF7;
							color: #fff;
							border: 1px solid #089AF7;
							border-radius: 0;
						}

						.el-input-group--append .el-input__inner {
							background: rgba(12, 51, 127, .4);
							border: 1px solid #089AF7;
							border-radius: 0;
							color: #fff
						}

						.el-button {
							padding: 1.11vh 1.04vw;
							font-size: 0.63vw;
						}
					}
				}

				.centerBox {
					width: 100%;
					clear: both;
					padding-top: 1vh;
					box-sizing: border-box;

					.projectName {
						cursor: pointer;
					}

					li {
						position: relative;
						list-style: none;
						margin-bottom: 1.5vh;
						height: auto;
						overflow: hidden;

						.bom-img {
							width: 100%
						}

						.name-img {
							width: 1.3vw;
							height: 2.5vh;
							float: left;
							margin-right: 1vw;
							margin-top: .3vh
						}

						.project-name {
							position: absolute;
							left: 2vw;
							padding: 0;
							width: 70%;
							border: 0;
							color: #fff;
							font-size: 1.1vw;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.tagBox {
							width: 100%;
							height: 4vh;
							//line-height: 4vh;
							text-align: right;

							span {
								font-size: 1vw;
								color: #fff;
							}

							span.span1 {
								color: #0AC7FE;
								font-weight: bold;
								//margin-right: 2.5vw;
							}

							span.span2 {
								color: #FED101;
								font-weight: bold;
							}
						}

						.pro-list {
							width: 100%;
							height: auto;
							overflow: hidden;
							background: url(../../assets/images/bcbgImg.png);
							padding: 1vh 1vh 2vh 1vh;
							box-sizing: border-box;

							.stageNum {
								width: 82%;
								height: 5vh;
								margin: 0 auto;
								display: flex;

								span {
									flex: 1;
									text-align: center;
									line-height: 6vh;
									font-size: 1vw;
									color: #bfbfbf
								}
							}

							.stageBox {
								width: 100%;
								height: auto;
								overflow: hidden;
								margin: 0.7vh auto 0;
								//display: flex;

								div {
									display: inline-block;
									width: 19%;
									//flex: 1;
									&:nth-child(1) {
										width: 33.3%;
									}

									span {
										display: block;
										width: 100%;
										text-align: center;
										line-height: 2.5vh;
										font-size: 0.85vw;
										color: #fff
									}
								}
							}

							.overflowData {
								height: 500px
							}

							.stageBg {
								width: 82%;
								height: 1.9vh;
								margin: 0 auto;
								position: relative;

								.start-datebg {
									width: 100%;
									height: 100%;
									position: absolute;
									top: 0;

									div {
										//width: 25%;
										height: 100%;
										float: left;
										background-size: 100% 100%;

										span.firstSpan {
											width: 13%;
											height: 100%;
											display: block;
											float: left;
											background-size: 100% 100%;
										}

										span.lastSpan {
											width: 13%;
											height: 100%;
											display: block;
											float: right;
											background-size: 100% 100%;
										}
									}
								}

								.sbor {
									width: 97%;
									height: .5px;
									background: rgba(12, 51, 127, 1);
									position: absolute;
									top: 1vh;
									margin: 0 .5vw
								}
							}
						}
					}
				}
			}
		}
	}

	.line-animate {
		animation: lineShow 0.8s linear 0.8s forwards;

		&:nth-child(2) {
			animation: lineShow 0.8s linear 1.6s forwards;
		}

		&:nth-child(3) {
			animation: lineShow 0.8s linear 2.4s forwards;
		}

		&:nth-child(4) {
			animation: lineShow 0.8s linear 3.2s forwards;
		}
	}

	@keyframes lineShow {
		from {
			width: 0;
		}
		to {
			width: 25%;
		}
	}

	@-webkit-keyframes lineShow {
		from {
			width: 0;
		}
		to {
			width: 25%;
		}
	}
}
</style>
